<template>
	<div>
		<div v-for="(item,i) in productList" :key="i">
			<div @click="toDetail(item)" class="productItem">
				<van-card :price="item.price" :desc="item.spec" :title="item.title" :thumb="APIDomainName + item.pic" />
			</div>
		</div>
	</div>
</template>

<script>
	import { getProductListAPI } from "@/api/product.js";
	export default {
		data() {
			return {
				productList: []
			}
		},
		mounted() {
			this.loadData()
		},
		methods: {
			loadData() {
				// 调用接口
				const params = { pageIndex: 2, pageSize: 8 }
				getProductListAPI(params).then(result => {
					console.log(result)
					this.productList = result.data;
				})
			},
			toDetail(item) {
				this.$router.push({
					path: '/productDetail',
					query: { id: item.id }
				})
			}

		}
	}
</script>

<style scoped>
	.productItem {
		margin: 10px 0;
	}
</style>